<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>contactrecord</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/style.css" />
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="js/time.js"></script>
</head>
<body>
	<div class="container">
		<!--header start-->
		<div class="header">
			<%@ include file="include/top.jsp" %>
		</div>
		<!--header end-->
		<div class="content">
			<div class="row">
				<div class="contact"><i class="icon-user"></i><a href="contact.jspx">联系人</a></div>
				<div class="span9">
					<div class="list">
						<div class="contactmessage">
							<span style="display:none">${contact.id }</span>
							<span>${contact.contactName }</span>
							<address>
								<p>${contact.contactCompanyName }</p>
								<small>手机：  </small>${contact.contactMobile }<br/>
								<small>固话：  </small>${contact.contactTel }<br/><br/>
								<small>邮箱：  </small>${contact.contactEmail }<br/>
								<small>地址： </small>${contact.contactAddress }<br/><br/>
								<small>主页： </small><a href="">${contact.contactWebsite }</a><br/>
								<small>微博：</small><a href="">${contact.contactWeibo }</a><br/><br/>
							</address>
							<h4>记录</h4>
							<form action="addcontactrecord.jspx" >
								<textarea rows="3" style="width:70%" id="record"></textarea>
								<span id="help" style="display:none;font-size:12px;margin-right:0px">不能为空</span><br />
								<a class="btn btn-info btn-fb" rel="${contact.id}">发布</a>
							</form>
							<div id="recordlist">
							<c:forEach items="${recordList }" var="record">
							<blockquote>${record.recordContent }
								<a href="editrecord.jspx?id=${record.id }"><i class="icon-pencil"></i></a>
								<a href="javascript:;" rel="${record.id }" class="delrecord"><i class="icon-trash"></i></a>
								<small title=" ${record.recordCreatetime}" id="${record.id}"></small>
								<script type="text/javascript">
										var name='${employee.name}';//当前登陆者
										var endtime = getNow();
										var starttime = '${record.recordCreatetime}';
										var id='${record.id}';
										var diftime = getTimeDif(starttime,endtime);
										$("#"+id).text(name+diftime);
									</script>
							</blockquote>
							</c:forEach>
							<c:if test="${empty recordList }">
								<blockquote>没有记录</blockquote>
							</c:if>
							</div>
							<a href="contact.jspx" class="find">←返回联系人列表</a>
						</div>
						
					</div>
				</div>
				<div class="span3">
				</div>
			</div>
		</div>
		<div class="footer">
			<%@ include file="include/footer.jsp" %>
		</div>
	</div>
	<script type="text/template" id="template">
		<blockquote>{{recordContent}}
		<a href="editrecord.jspx?id={{id}}"><i class="icon-pencil"></i></a>
		<a href="javascript:;" rel="{{id}}" class="delrecord"><i class="icon-trash"></i></a>
		<small title="{{recordCreatetime}}" id="{{id}}"></small>
		</blockquote>
	</script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".btn-fb").click(function(){
				var record = $("#record").val();//记录内容
				var contactid = $(this).attr("rel");//获取联系人id
				if(!record){
					$("#help").show();
					$("#record").focus();
				}else{
					$.post("addcontactrecord.jspx",{contactid:contactid,record:record},function(result){
						$("#recordlist").html("");
						if(result.length>0){//判断返回的json是否有数据
							$(result).each(function(){
								var recordContent = this.recordContent;
								var recordCreatetime = this.recordCreatetime;
								var recordId = this.id;
								var name = '${employee.name}';//当前登陆者
								var template =$("#template").html();
								template = template.replace(/{{recordContent}}/g,recordContent).replace(/{{id}}/g,recordId).replace(/{{recordCreatetime}}/g,recordCreatetime);
								$("#recordlist").append(template);
								var endtime = getNow();
								var diftime = getTimeDif(recordCreatetime,endtime);
								$("#"+recordId).text(name+diftime);
							});
						}else{
							$("#recordlist").append("<blockquote>没有记录</blockquote>");
						}	
					});
					$("#record").val("");
				}
				$("#record").keydown(function(){
					$("#help").hide();
				});
			});
		
			//删除记录
			$(".delrecord").live("click",function(){
				var recordid = $(this).attr("rel");
				if(window.confirm("确实要删除该记录吗？")){
					window.location="delrecord.jspx?id="+recordid;
				}
			});
			
		});
			
		
	
	</script>
</body>
</html>